<template>
	<div id='page3'>
		<!-- 眉头 -->
		<div class='all_title'>
			<div class='intro'>
				<p>个人</p>
				<p class='other'>博客</p>
			</div>
			<div class='english'>
				Personal blog
			</div>
			<!-- 向左向右按钮  -->
			<div class='lf_btn'>
				<div class='lf' @click='left'>
					&lt;
				</div>
				<div class='lf' @click='right'>
					&gt;
				</div>
			</div>
		</div>
		<!-- 最大容器  -->
		<div class='all_blog'>
			<div class='item_blog' v-for='(item,index) in thisBlogArray' @mouseover='overImg(index)' @mouseout='outImg(index)' :key='index'>
				<h2 class='title'>{{ item.title }}</h2>
				<img class='img' :src="item.img" alt="图片加载中...">
				<p class='hot'>{{ item.hot }}</p>
				<p class='time'>{{ item.time }}</p>
				<router-link class='read_btn' :to="'/readblog/'+item.id">点击阅读</router-link>
			</div>
		</div>

	</div>
</template>
<script>
	export default {
		name: 'page3',
		data() {
			return {
				index: 0, // 数据序号索引
				thisBlogArray: [], // 取三条数据
				allBlogArray: [], // 所有数据
				thisImgSrc: null,  	// 当前图片目标文件
				zhangshan: 'Hello'
			}
		},
		created() {
			var that = this;
			this.$axios.get('https://www.mokeylife.cn/MyHomePage/readAllBlog.do')
				.then(function(response) {
					if (response.data.code == 'success') {
						that.allBlogArray = response.data.data;
						that.initBlogArray();
					} else {
						// 错误事件处理
						that.$notify.error({
							title: '错误',
							message: '网络错误，请重试！'
						});
					}
				})
				.catch(function(error) {
					that.$notify.error({
						title: '错误',
						message: '网络错误，请重试！'
					});
				});
		},
		methods: {
			// 将数组中所有数据只取三条显示在页面上
			initBlogArray: function() {
				// 获取服务器回传的所有数据的长度
				var allLen = this.allBlogArray.length;
				if (allLen <= 3) {
					// 长度不够初次渲染
					for (var i = 0; i < allLen; i++) {
						this.thisBlogArray.push(this.allBlogArray[i]);
					}
				} else {
					// 长度够初次渲染
					for (var i = 0; i < 3; i++) {
						this.thisBlogArray.push(this.allBlogArray[i]);
					}
				}
			},

			// 弹出消息
			popInfo: function(msg) {
				this.$notify.error({
					title: '消息',
					message: msg
				});
			},

			// 向左点击按钮
			left: function() {
				if (this.index - 1 < 0) {
					this.popInfo('这已经是第一条数据了！');
					return false;
				} else {
					this.index--;
					this.thisBlogArray = [];
				}

				for (var i = this.index * 3; i < this.index * 3 + 3; i++) {
					this.thisBlogArray.push(this.allBlogArray[i]);
				}
			},

			// 向右点击按钮
			right: function() {
				if (this.index + 1 >= this.allBlogArray.length / 3) {
					this.popInfo('这已经是最后一条数据了！');
					return false;
				} else {
					this.index++;
					this.thisBlogArray = [];
				}

				// 当前长度
				var len = 0;
				if (this.allBlogArray.length - this.index * 3 >= 3)
					len = 3;
				else
					len = this.allBlogArray.length - this.index * 3;

				for (var i = this.index * 3; i < this.index * 3 + len; i++) {
					this.thisBlogArray.push(this.allBlogArray[i]);
				}
			},

			// 触控博客DIV
			overImg: function(index){
				this.thisImgSrc = this.thisBlogArray[index].img;
				// 获取最后字段
				this.thisBlogArray[index].img = this.thisBlogArray[index].imgHover;
			},

			// 离开博客DIV
			outImg: function(index){
				this.thisBlogArray[index].img = this.thisImgSrc;
			}
		}
	}

</script>
<style scoped="true">
	* {
		margin: 0px;
		padding: 0px;
	}

	#page3 {
		top: 295%;
		width: 71%;
		margin-left: 27%;
		margin-top: 160px;
		padding-top: 40px;
		position: absolute;
		padding-bottom: 80px;
		font-family: '微软雅黑';
		border-bottom: 1px solid #EEEEEE;
	}

	.all_title {
		width: 100%;
		margin-bottom: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.other {
		color: #45489A;
		font-weight: bolder;
	}

	.english {
		color: #343434;
		font-size: 15px;
		line-height: 120px;
		margin-right: auto;
		font-family: 'Open Sans', sans-serif;
	}

	.intro {
		color: #232323;
		font-size: 32px;
		padding-left: 10px;
		margin-right: 50px;
		border-left: 3px blue solid;
	}

	.lf_btn {
		justify-content: flex-end;
		display: flex;
		margin-top: 35px;
		flex-direction: row;
	}

	.lf_btn .lf {
		width: 50px;
		height: 50px;
		margin-right: 15px;
		text-align: center;
		line-height: 50px;
		color: #232323;
		background-color: #EEEEEE;
		font-size: 36px;
		transition: all 0.5s;
	}

	.lf:hover {
		color: #FFFFFF;
		background-color: #45489A;
	}

	.all_blog {
		width: 99%;
		display: flex;
		min-width: 180px;
		overflow: hidden;
		flex-direction: row;
	}

	.item_blog {
		width: 31%;
		margin-left: 2%;
		overflow: hidden;
	}

	.title {
		width: 100%;
		color: #4C4C4C;
		overflow: hidden;
		font-weight: bold;
		margin-bottom: 2em;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.img {
		width: 100%;
		height: 170px;
		overflow: hidden;
		transition: all 1s;
	}

	.hot {
		color: #4c4c4c;
		font-size: 15px;
		margin-top: 30px;
		overflow: hidden;
		height: 102px;
		line-height: 25px;
		position: relative;
		text-overflow: ellipsis;
	}

	.hot::after {
		right: 0;
		bottom: 0;
		content: "...";
		font-weight: bold;
		position: absolute;
		padding: 0 20px 1px 45px;
		background: url(../../assets/ellipisbg/ellipsis_bg.png) repeat-y;
	}

	.time {
		float: right;
		font-size: 14px;
		font-style: italic;
		margin-right: 10px;
	}

	.read_btn {
		clear: both;
		width: 120px;
		height: 40px;
		display: block;
		color: #FFFFFF;
		margin-top: 80px;
		line-height: 40px;
		text-align: center;
		transition: all 0.6s;
		border-radius: 50px;
		text-decoration: none;
		background-color: #E95D3C;
	}

	.read_btn:hover {
		background-color: #DE3D27;
	}

</style>
